<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        canvas {
            box-shadow: 0 0 40px #333;
        }
    </style>
</head>
<body onload="draw()">
<canvas id="canvas1" width="300" height="300">
    你的浏览器太 low 了，请更新~!
</canvas>

<canvas id="canvas2" width="300" height="300">
    你的浏览器太 low 了，请更新~!
</canvas>

<canvas id="canvas3" width="300" height="300">
    你的浏览器太 low 了，请更新~!
</canvas>

<canvas id="canvas4" width="300" height="300">
    你的浏览器太 low 了，请更新~!
</canvas>

<script>
    function draw() {
        var canvas1 = document.getElementById("canvas1");
        if (canvas1.getContext) {
            var ctx1 = canvas1.getContext('2d');

            ctx1.beginPath();
            ctx1.fillStyle = 'red';
            ctx1.fillRect(50, 50, 100, 100);

            // 图像混合
            /**
             * 目标图像：画布已经存在的图像
             * 源图像：即将画到画布上的图像
             *
             * source-over：重叠区域源图像覆盖目标图像
             * destination-over：重叠区域目标图像覆盖源图像
             */
            ctx1.globalCompositeOperation = 'source-over';
            ctx1.fillStyle = 'green';
            ctx1.arc(150, 150, 50, 0, Math.PI * 2);
            ctx1.fill();
        }

        var canvas2 = document.getElementById("canvas2");
        if (canvas2.getContext) {
            var ctx2 = canvas2.getContext('2d');

            ctx2.beginPath();
            ctx2.fillStyle = 'red';
            ctx2.fillRect(50, 50, 100, 100);

            /**
             * source-atop：只显示与目标图像重叠的部分
             * destination-atop：只显示与源图像重叠的部分
             */
            ctx2.globalCompositeOperation = 'destination-atop';
            ctx2.fillStyle = 'green';
            ctx2.arc(150, 150, 50, 0, Math.PI * 2);
            ctx2.fill();
        }

        var canvas3 = document.getElementById("canvas3");
        if (canvas3.getContext) {
            var ctx3 = canvas3.getContext('2d');

            ctx3.beginPath();
            ctx3.fillStyle = 'red';
            ctx3.fillRect(50, 50, 100, 100);

            /**
             * source-in：只显示与目标图像重叠的部分的源图像，目标图像不显示
             * destination-in：只显示与源图像重叠的部分的目标图像，源图像不显示
             */
            ctx3.globalCompositeOperation = 'destination-in';
            ctx3.fillStyle = 'green';
            ctx3.arc(150, 150, 50, 0, Math.PI * 2);
            ctx3.fill();
        }

        var canvas4 = document.getElementById("canvas4");
        if (canvas4.getContext) {
            var ctx4 = canvas4.getContext('2d');

            ctx4.beginPath();
            ctx4.fillStyle = 'red';
            ctx4.fillRect(50, 50, 100, 100);

            /**
             * source-out：重叠部分不显示，显示不重叠的源图像
             * destination-out：重叠部分不显示，显示不重叠的目标图像
             */
            ctx4.globalCompositeOperation = 'destination-out';
            ctx4.fillStyle = 'green';
            ctx4.arc(150, 150, 50, 0, Math.PI * 2);
            ctx4.fill();
        }
    }
</script>
</body>
</html>
